<template>
  <view>
    <view v-for="(pitem, pindex) in shoppingItems" :key="pindex">
      <view v-for="(item, index) in pitem" :key="index" class="product-info">
        <view v-if="item.type !== 3" style="position: relative" @click="_toGoods(item)">
          <view class="product-box">
            <view v-if="item.type===202" class="product-img">
              <image :src="item.pic" />
            </view>
            <view v-else class="product-img">
              <image :src="item.pic" />
            </view>
            <view class="product-intro">
              <view>
                <view v-if="item.from_type === 261" class="o-p">
                  <text class="o-add">加购</text> {{ item.title }}
                </view>
                <view v-if="item.from_type !== 261" class="o-p">
                  <text v-if="item.type === 2 && item.from_type !== 11" class="o-span">套餐</text> {{ item.title }}
                </view>
                <view v-if="item.from_type === 261" class="o-small">{{ item.properties_name }}</view>
              </view>
              <view class="money-item">
                <view v-if="item" class="o-b">
                  <!-- <text v-if="item.type === 2" class="o-span">套餐总价: </text> -->
                  <text>￥<text class="big-money">{{ _getShowPrice(item) }}</text></text>
                  <text v-if="item.type===202" class="outsidePrice">¥{{ item.price }}</text>
                </view>
              </view>
            </view>
          </view>
          <view class="rightFixed">
            <!-- 配送判断 -->
            <view v-if="Object.getOwnPropertyDescriptor(item,'is_sup_delivery') && item.is_sup_delivery === 0 && goodsNums > 1" class="showNoBuy">*该地区暂不支持配送</view>
            <block v-else-if="item.need_change_num">
              <base-stepper :value.sync="item.num" :min="1" :max="item.user_quantity || 9999999" :size="34" :border-radius="4" @change="cartNumChange($event,item)" @disable="handleDisable"></base-stepper>
            </block>
            <block v-else>
              <text class="clicks">X <text class="big-money">{{ item.num }}</text></text>
            </block>
            <view v-show="showRefund && item.is_self !== 1" class="saleReturn">
              <!-- v-if="item.had_refund_goods_num" -->
              <view v-if="item.refund_times" style="width: 120rpx" class="returnState" @click="saleReturnDetail(item)">{{ item.refund_times === 1 ? '查看售后' : '售后列表' }}</view>
              <view v-if="item.refund_goods_num * 1 > 0" class="returnLink" @click="toSaleReturn(item)">退换</view>
            </view>
          </view>
        </view>
        <!-- v-if="item.type === 1 ||item.type === 2 || item.type === 3" -->

        <view v-for="(spitem, spindex) in item.pack" :key="spindex">
          <view v-for="(sitem, sindex) in spitem" :key="sindex" style="margin-top: 10px">
            <view class="product-info">
              <view class="product-box">
                <view class="product-img" @click="_toGoods(item)">
                  <image v-if="sitem.pic" :src="sitem.pic" />
                </view>
                <view class="product-intro">
                  <view>
                    <view class="o-p">
                      <text v-if="spindex === 'present_list'" class="gift">赠品</text> {{ sitem.title }}
                    </view>
                    <view class="o-small">{{ sitem.properties_name }}</view>
                  </view>
                  <view class="money-item">
                    <view class="o-b">
                      <text>￥<text class="big-money deletePrice">{{ sitem.price | formatMoney }}</text></text>
                    </view>
                  </view>
                </view>
              </view>
              <view class="rightFixed">
                <text class="clicks">X <text class="big-money">{{ sitem.num }}</text></text>
              </view>
            </view>
          </view>
        </view>
        <view v-if="showRate" class="rateBox">
          <view class="itemFooter">
            <view class="startColumn">
              <view class="rowText">商品评价</view>
              <view class="rowStart">
                <image
                  v-for="i in star"
                  :key="i"
                  :src=" i <= (item.score ? item.score : 5) ? '/static/images/order/icon_star_selected.png' : '/static/images/order/icon_star.png'"
                  @click="changeStart(pindex, index, i)" />
              </view>
            </view>
          </view>
          <view class="lineGrey"></view>
          <view class="lineGrey lineWhite"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { toGoods } from '@/utils/navigateTo'
import { getUserLevel, getShowPrice } from '@/utils/common'
import { mapGetters } from 'vuex'
import baseStepper from '@/components/base/base-stepper.vue'

export default {
  name: 'GoodItem',
  components: {
    baseStepper
  },
  props: {
    shoppingItems: {
      type: Object,
      default() {
        return {}
      }
    },
    preventClick: {
      type: Boolean,
      default: false
    },
    showRate: {
      type: Boolean,
      default: false
    },
    showPriceLeast: {
      type: Boolean,
      default: false
    },
    needRole: {
      type: Boolean,
      default: false
    },
    showRefund: {
      type: Boolean,
      default: false
    },
    orderIndex: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      startLength: 5,
      star: [1, 2, 3, 4, 5],
      currentItem: null
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'userToken',
      'goodsTempObj'
    ]),
    goodsNums() {
      let num = 0
      if (this.goodsTempObj && this.goodsTempObj.data) {
        num = this.goodsTempObj.data.shopping_items.item_list.length + this.goodsTempObj.data.shopping_items.activity_item_list.length
      }

      return num
    }
  },
  methods: {
    _getUserLevel(id) {
      return getUserLevel(id)
    },
    _getShowPrice(item) {
      // if (item.paid) {
      //   return item.paid.toFixed(2)
      // }
      if (!this.user || this.showPriceLeast) {
        return item.price.toFixed(2)
      }
      if (this.needRole && (item.from_type === 8 || item.from_type === 11)) {
        return item[getShowPrice()] ? item[getShowPrice()].toFixed(2) : item.vip_price
      }
      if (this.needRole && (item.from_type === 9)) {
        return item[getUserLevel()] ? item[getUserLevel()].toFixed(2) : item.vip_price
      }
      return item[getShowPrice()] ? item[getShowPrice()].toFixed(2) : item.vip_price
    },
    changeStart(pindex, index, i) {
      this.$emit('changeStart', { orderIndex: this.orderIndex, pindex, index, i })
    },
    saleReturnDetail(item) {
      this.$emit('saleReturnDetail', item)
    },
    toSaleReturn(item) {
      this.$emit('toSaleReturn', item)
    },
    cartNumChange(e, item) {
      this.$set(item, 'num', +e)
      this.currentItem = item
      this.$emit('cartNumChange', {
        item: item,
        nums: e
      })
      this.$forceUpdate()
    },
    updateView(tempShipping) {
      try {
        const tempList = JSON.parse(tempShipping)
        tempList.map(el => {
          if (el.goods_id === this.currentItem.goods_id && el.sku_code === this.currentItem.sku_code) {
            this.$set(this.currentItem, 'num', el.num)
            this.$forceUpdate()
          }
        })
      } catch (error) {
        console.log('error', error)
      }
    },
    handleDisable(type) {
      if (type === 'del') {
        uni.showToast({
          title: '亲, 不能再减少数量了!',
          icon: 'none'
        })
      } else if (type === 'add') {
        uni.showToast({
          title: '亲, 不能再买更多啦!',
          icon: 'none'
        })
      }
    },
    _toGoods(item) {
      if (this.preventClick || item.from_type === 11 || item.from_type === 261) {
        return
      }
      toGoods(item, 'navigateTo', {
        firstseat: '订单详情'
      })
    }
  }
}

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .product-info {
    position: relative;
    margin-bottom: 32rpx;
    &:nth-last-child(1){
      margin-bottom: 0;
    }
    color: #000;
    .lineGrey{
      height: 20rpx;
      background-color: #efefef;
      width: 100%;
      position: relative;
      left: -20rpx;
    }
    .lineWhite{
      background-color: #fff;
    }
    .itemFooter{
      border-top: 1px solid $color-border;
      position: relative;
      display: flex;
      flex-direction: row-reverse;
      padding: 10rpx 0;
      .rowText{
        text-align: right;
      }
      .startColumn{
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        .rowStart{
          display: flex;
          image{
            margin: 10rpx;
            width: 40rpx;
            height: 40rpx;
          }
        }
      }
    }
    .product-box {
      display: flex;
      color: #000;
      .product-img {
        flex: 0 0 200rpx;
        height: 200rpx;
        margin-right: 24rpx;
        overflow: hidden;
        image {
          width: 200rpx;
          height: 200rpx;
        }
      }
      .product-intro {
        display: flex;
        width: calc(100% - 120px);
        flex: 0 0 calc(100% - 120px);
        flex-direction: column;
        justify-content: space-between;
        .money-item {
          @include flex;
          @include j-between;
          font-size: 24rpx;
          .big-money {
            font-size: 36rpx;
          }
        }
        .outsidePrice{
          color: rgba(204, 204, 204, 1);
          text-decoration:line-through;
          font-size: 22rpx;
        }
        .o-p {
          font-weight:500;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 100%;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          word-break: break-all;
          .o-span{
            display: inline-block;
            color: $color-theme;
            border: 1px solid $color-theme;
            padding: 0px 12rpx;
            font-size: 24rpx;
            transform: scale(0.8);
            border-radius: 28rpx;
          }
          .gift {
            width:64rpx;
            height:30rpx;
            // background:rgba(226,21,54,1);
            border: 2rpx solid #000;
            font-size:24rpx;
            font-weight:500;
            color:#000;
            line-height:30rpx;
            padding: 0 8rpx;
            border-radius: 4rpx;
            margin-right: 7rpx;
          }
          .o-add{
            width:64rpx;
            height:30rpx;
            font-size:24rpx;
            font-weight:500;
            line-height:30rpx;
            padding: 0 8rpx;
            border-radius: 4rpx;
            margin-right: 7rpx;
            background-color: #E21536;
            color: #fff;
          }
          .blueTitle{
            background-color: #4D88FF;
          }
        }
        .proper{
          display: flex;
          .o-small {
            color: #999999;
            font-size: 24rpx;
            // transform: scale(0.8);
            display: block;
            padding-right: 16rpx;
            border-radius: 16rpx;
            // background-color: #F9F9F9;
          }
        }
        .o-small {
          color: $color-tips;
          font-size: 24rpx;
          margin-top: 8rpx;
        }
        .o-b {
          font-weight: normal;
          // color: $color-price;
        }
      }
    }
    .rightFixed{
      position: absolute;
      right: 0;
      bottom: 0rpx;
      color: $color-input;
      display: flex;
      flex-direction: column-reverse;
      .clicks {
        position: absolute;
        right: 0;
        bottom: 0rpx;
        color: #000;
        font-size: 24rpx;
        .big-money{
          font-size: 36rpx;
          // transform: scale(0.7);
        }
      }
      .saleReturn{
        display: flex;
        font-size: $font-size-small;
        .returnState{
          display: block;
          border: 1px solid $color-theme;
          color: $color-theme;
          width: 100rpx;
          text-align: center;
          line-height: 44rpx;
          margin-right: 20rpx;
        }
        .returnLink{
          display: block;
          border: 1px solid $color-theme;
          background-color: $color-theme;
          color: white;
          width: 100rpx;
          text-align: center;
          line-height: 44rpx;
        }
      }
    }
    .showNoBuy {
      color: #3156F6;
      font-size:24rpx;
      position: absolute;
      white-space:nowrap;
      right:130%;
    }
  }
  .product-info:nth-last-child(1){
    .lineGrey{
      display: none;
    }

  }
.deletePrice{
  color: #000 !important;
  text-decoration: line-through;
}
</style>
